<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>雷电波形图</title>
    <!--框架必需start-->
    <script type="text/javascript" src="../../libs/js/jquery.js"></script>
    <script type="text/javascript" src="../../libs/js/language/cn.js"></script>
    <script type="text/javascript" src="../../libs/js/framework.js"></script>
    <link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" id="skin" prePath="../../"/>
    <link rel="stylesheet" type="text/css" id="customSkin"/>
    <!--框架必需end-->
    <link rel="stylesheet" type="text/css" href="../../sample_skin/demo/style/style.css"/>

    <script src="../../libs/js/table/quiGrid.js" type="text/javascript"></script>

    <!--基本选项卡start-->
    <script type="text/javascript" src="../../libs/js/nav/basicTab.js"></script>
    <!--基本选项卡end-->

    <!--self开始-->
    <link rel="stylesheet" href="../../assets/css/m_style.css" class="m_style">
    <script type="text/javascript" src="../../assets/js/echarts.min.js"></script>
    <script type="text/javascript" src="../../assets/js/utils.js"></script>
    <!--self结束-->
</head>

<body>
<div class="m_pos">
    <img src="../../assets/images/position.png" alt="" class="m_position">
    <span>当前页面：</span>
    <span class="m_pos_local">雷电波形图</span>
</div>
<div class="page_content">
    <div class="m_light_waveform">
        <div class="m_lw_top">
            <p class="m_lw_name">雷电波形图</p>
           <!-- <ul class="m_lw_slide">
                <li class="m_lw_slide_focus">7天</li>
                <li>30天</li>
            </ul>-->
        </div>
        <div id="spendingComparedAnalysis"></div>
    </div>
    <div class="infoCard infoCard2">
        <div class="m_lw_table">
            <div id="dataBasic"></div>
        </div>
    </div>
</div>

<script type="text/javascript">
    var ctr="http://www.chinalightning.com.cn/api/ldechart/";

    var gridData = {
        "form.paginate.pageNo": 1
    };
    var last30DaysValue=new Array(30).fill(0);
    var last30Days=[];
    $.get(ctr, function (res) {
        if (res!=400){
            var data=res.message;
            var resData=[];
            data.forEach((value,key)=>{
                var convertData={};
                convertData.num=value["波形序号"];
                convertData.area="-";
                convertData.date=value["日期"];
                convertData.set_date=value["时间"];
                convertData.time=value["波形持续时间"];
                convertData.dir=value["波头方向"];
                convertData.power=value["波形能量"];
                var  num=value["峰值"];
                convertData.max=num;
                resData.push(convertData);
                last30DaysValue=value.value;
            })
            gridData.rows=resData;
            initComplete();
            spendingComparedAnalysis();
        }else{
            top.Dialog.alert("当前无数据");

        }


    });

    var grid = null;
    //列表显示

    function initComplete() {
        grid = $("#dataBasic").quiGrid({
            columns: [{
                display: '设备地址',
                name: 'area',
                width: "13%",
                cellClick: true
            }, {
                display: '波形序号',
                name: 'num',
                width: "13%",
            }, {
                display: '日期',
                name: 'date',
                width: "12.5%",
            }, {
                display: '时间',
                name: 'set_date',
                width: "13%",
            }, {
                display: '波形持续时间',
                name: 'time',
                width: "13%",
            }, {
                display: '波形方向',
                name: 'dir',
                width: "12.5%",
            }, {
                display: '波形能量',
                name: 'power',
                width: "12.5%",
            }, {
                display: '峰值',
                name: 'max',
                width: "12.5%",
            }
            ],
            data: gridData,
            sortName: 'id',
            rownumbers: false,
            checkbox: false,
            height: '100%',
            width: "100%",
            pageSize: 10,
            percentWidthMode: true,
            // onAfterShowData: onAfterShowData,
        });
    }

    function onAfterShowData(data) {

        $("#dataBasic").find(".popupMenu").each(function () {
            $(this).hover(function () {
                $(this).find(".popupMenu_con").show();
            }, function () {
                $(this).find(".popupMenu_con").hide();
            });
        })
    }


    // 图标统计


</script>
<script>
    //雷电波形图

    // 切换
    $(".m_lw_slide>li").click(function () {
        var m_lw_num = $(this).index();
        if (m_lw_num == 0) {
            $(".m_lw_name").html("近7天雷电波形图")
            spendingComparedAnalysis(7);
        } else {
            $(".m_lw_name").html("近30天雷电波形图");
            spendingComparedAnalysis(30);
        }
        $(this).addClass("m_lw_slide_focus");
        $(this).siblings("li").removeClass("m_lw_slide_focus");
    })

    function spendingComparedAnalysis() {
        var temp=0;
        last30Days=[];
        last30DaysValue.forEach(function (value,index) {
            last30Days.push(temp);
            temp+=0.5;
        })

        var myChart = echarts.init(document.getElementById('spendingComparedAnalysis'));
        option = {

            tooltip: {
                trigger: 'axis',
                color: '#007AFF',
                textStyle: {
                    color: '#fff'
                },

            },

            legend: {
                show: false,
                orient: 'vertical',
                right: '0',
                align: "left",
                top: "20",
                data: [
                    {name: '波形图峰值：', textStyle: {color: '#007AFF'}},
                ]
            },
            xAxis: {
                name:'us',
                type: 'category',
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#eee',
                    }
                },
                axisLabel: {
                    color: '#666'
                },
                axisLine: {
                    lineStyle: {
                        color: '#C8C8C8',
                    }
                },
                data:last30Days

            },
            yAxis: {
                type: 'value',
                //坐标轴内线的样式
                splitLine: {
                    lineStyle: {
                        color: '#eee',
                    }
                },
                // 取消刻度线
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#C8C8C8',
                    }
                },
                max: function(value) {
                    return value.max + 5;
                },
              /*  min: 0,
                max: function(value) {
                    return value.max + 0.1;
                },*/
                axisLabel: {
                    // formatter: '{value}.00%',
                    color: '#5e6472'
                }
            },
            series: [{
                data:last30DaysValue,
                type: 'line',
                step:'end',
                name: '波形图峰值',
                showSymbol: false,
                color: ['#4d96f7'],
                lineStyle: {
                    normal: {
                        width: 1
                    }
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgb(77,150,247)'
                    }, {
                        offset: 1,
                        color: 'rgb(77,150,247)'
                    }])
                },


            }]
        };
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    }

    spendingComparedAnalysis()
</script>
</body>

</html>
